
<template>
  <!-- 成本管理 -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="formInline.key" placeholder="输入合作公司" style="width:140%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" style=" margin-left: 150px;">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表单1 -->
    <div class="Ben_JingBan">
      <div class="Zt">
        <span>待审核</span>
      </div>
      <div class="Zt_a">
        <span>3</span>
      </div>
    </div>
    <div class="from_tabs">
      <el-table :data="tableData" height="250" max-height="200" style="width: 100%;">
        <!-- <el-table-column prop="tl" align="center" ></el-table-column> -->
        <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
        <el-table-column prop="tow" label="订单号" align="center"></el-table-column>
        <el-table-column prop="three" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="for" label="订单总价(元)" align="center" width="150"></el-table-column>
        <el-table-column prop="fivea" label="付款方式" align="center"></el-table-column>
        <el-table-column prop="sixa" label="合同类型" align="center"></el-table-column>
        <el-table-column prop="sevena" label="订单类型" align="center"></el-table-column>
        <el-table-column prop="eight" label="下单时间" align="center"></el-table-column>
        <el-table-column prop="nine" label="交货时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="warning" size="small" @click="AccounTing">核算</el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- ================================================================ -->
    <!-- ========= 分页========= -->
    <!-- ================================================================ -->
    <!-- <div class="bottom_slate">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
      ></el-pagination>
      <el-pagination background layout="prev, pager, next" :total="1000" style="text-align：center"></el-pagination>
    </div>-->
    <!-- ============================================= -->
    <!-- ========== 核算弹框 ============ -->
    <!-- ============================================= -->
    <el-dialog :visible.sync="dialogTableVisibleBa" :modal-append-to-body="false" width="1100px">
      <div class="herd_bud"></div>
      <div class="from_bt">成本核算</div>
      <br />
      <p class="Purchase_Division"></p>
      <div class="demo-form-inline">
        <el-form :model="formInlineBt" :inline="true" class="demo-form-inline" label-width="100px">
          <el-form-item label="订单号">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="合同类型">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="交货时间">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="订单金额">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
          <el-form-item label="原料金额">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
        </el-form>
        <div style="overflow:hidden">
          <div style="float: left; width:50%;">
            <div class="From_List_bt">订单列表</div>
            <el-table :data="tableDataBa" height="350" max-height="300">
              <el-table-column prop label="序号" align="center" type="index" width="70"></el-table-column>
              <el-table-column prop="a" label="产品编号" align="center"></el-table-column>
              <el-table-column prop="b" label="产品名称" align="center"></el-table-column>
              <el-table-column prop="c" label="类型" align="center"></el-table-column>
              <el-table-column prop="d" label="数量" align="center"></el-table-column>
              <el-table-column prop="e" label="金额(元)" align="center"></el-table-column>
            </el-table>
          </div>
          <div style="float: right; width:50%;">
            <div class="From_List_bt">原料列表</div>
            <el-table :data="tableDataBy" height="350" max-height="300">
              <el-table-column prop label="序号" align="center" type="index" width="70"></el-table-column>
              <el-table-column prop="ai" label="原料名称" align="center"></el-table-column>
              <el-table-column prop="bi" label="采购数量" align="center"></el-table-column>
              <el-table-column prop="ci" label="支付金额(元)" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
        <el-form :model="formInlineBt" :inline="true" class="demo-form-inline" label-width="100px">
          <el-form-item label="固定成本比">
            <el-input v-model="formInlineBt"></el-input>
          </el-form-item>
        </el-form>
        <br />
        <div class="from_btn">
          <el-button @click="dialogTableVisibleBa = false" type="primary" size="small">确认</el-button>
          <el-button @click="dialogTableVisibleBa = false" type="info" size="small">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 表单2 -->
    <div class="from_tab">
      <el-table :data="tableDatas" :height="370" :max-height="370">
        <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
        <el-table-column prop="one" label="日期" align="center"></el-table-column>
        <el-table-column prop="tow" label="订单号" align="center"></el-table-column>
        <el-table-column prop="three" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="for" label="订单总价(元)" align="center" width="140"></el-table-column>
        <el-table-column prop="five" label="原料总价(元)" align="center"></el-table-column>
        <el-table-column prop="six" label="固定成本(%)" align="center"></el-table-column>
        <el-table-column prop="seven" label="总利润" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="primary" size="small" @click="DeTails">详情</el-button>
        </el-table-column>
      </el-table>
      <!-- ================================================================ -->
      <!-- ========= 分页========= -->
      <!-- ================================================================ -->
      <div class="bottom_slate">
        <!-- <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>-->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
          style="text-align：center"
        ></el-pagination>
      </div>
      <!-- ================================================= -->
      <!-- ============= 详情弹框 ===============-->
      <!-- ================================================= -->
      <el-dialog :visible.sync="dialogTableVisiblea" :modal-append-to-body="false" width="800px">
        <div class="herd_bud"></div>
        <div class="from_bt">利润详情</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-form
            :model="formInlineBt"
            :inline="true"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="订单利润">
              <el-input v-model="formInlineBt"></el-input>
            </el-form-item>
            <el-form-item label="固定成本比">
              <el-input v-model="formInlineBt"></el-input>
            </el-form-item>
          </el-form>
          <div class="From_List_bt">订单列表</div>
          <el-table :data="tableDataBa" height="350" max-height="300">
            <el-table-column prop label="序号" align="center" type="index" width="70"></el-table-column>
            <el-table-column prop="a" label="产品编号" align="center"></el-table-column>
            <el-table-column prop="b" label="产品名称" align="center"></el-table-column>
            <el-table-column prop="c" label="类型" align="center"></el-table-column>
            <el-table-column prop="d" label="数量" align="center"></el-table-column>
            <el-table-column prop="e" label="金额(元)" align="center"></el-table-column>
          </el-table>
          <div class="From_List_bt">原料列表</div>
          <el-table :data="tableDataBy" height="350" max-height="300">
            <el-table-column prop label="序号" align="center" type="index" width="70"></el-table-column>
            <el-table-column prop="ai" label="原料名称" align="center"></el-table-column>
            <el-table-column prop="bi" label="采购数量" align="center"></el-table-column>
            <el-table-column prop="ci" label="支付金额(元)" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="from_btn">
          <el-button @click="dialogTableVisiblea = false" type="primary" size="small">确认</el-button>
          <el-button @click="dialogTableVisiblea = false" type="info" size="small">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import daohanganniu from "../../components/daoHangAnNiu.vue";
export default {
  components: {},
  data() {
    return {
      dialogTableVisiblea: false,
      dialogTableVisibleBa: false,
      formInline: {},
      formInlineBt: {},
      tableDataBa: [
        {
          a: "JL_5897",
          b: "江铃汽车",
          c: "辆",
          d: "3000.00",
          e: "580000.00"
        },
        {
          a: "JL_5897",
          b: "江铃汽车",
          c: "辆",
          d: "3000.00",
          e: "580000.00"
        },
        {
          a: "JL_5897",
          b: "江铃汽车",
          c: "辆",
          d: "3000.00",
          e: "580000.00"
        },

        {
          a: "JL_5897",
          b: "江铃汽车",
          c: "辆",
          d: "3000.00",
          e: "580000.00"
        }
      ],
      tableDataBy: [
        {
          ai: "JL_5897",
          bi: "3000.00",
          ci: "580000.00"
        },
        {
          ai: "JL_5897",
          bi: "3000.00",
          ci: "580000.00"
        },
        {
          ai: "JL_5897",
          bi: "3000.00",
          ci: "580000.00"
        },
        {
          ai: "JL_5897",
          bi: "3000.00",
          ci: "580000.00"
        }
      ],
      tableData: [
        {
          tow: "U-56446",
          three: "江铃汽车",
          for: "500000.00",
          fivea: "500000.00",
          sixa: "8%",
          sevena: "500000.00",
          eight: "2019-12-05",
          nine: "2019-12-08"
        },
           {
          tow: "U-56446",
          three: "江铃汽车",
          for: "500000.00",
          fivea: "500000.00",
          sixa: "8%",
          sevena: "500000.00",
          eight: "2019-12-05",
          nine: "2019-12-08"
        },
      ],
      tableDatas: [
        {
          one: "2019-12-05",
          tow: "U-56446",
          three: "江铃汽车",
          for: "500000.00",
          five: "500000.00",
          six: "8%",
          seven: "500000.00",
        },
          {
          one: "2019-12-05",
          tow: "U-56446",
          three: "江铃汽车",
          for: "500000.00",
          five: "500000.00",
          six: "8%",
          seven: "500000.00",
        },
          {
          one: "2019-12-05",
          tow: "U-56446",
          three: "江铃汽车",
          for: "500000.00",
          five: "500000.00",
          six: "8%",
          seven: "500000.00",
        },
      ]
    };
  },
  methods: {
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //     if (columnIndex === 0) {
    //       if (rowIndex === 0) {
    //         return {
    //           rowspan: 10,
    //           colspan: 1
    //         };
    //       } else {
    //         return {
    //           rowspan: 0,
    //           colspan: 0
    //         };
    //       }
    //     }
    //   },
    //详情
    DeTails() {
      this.dialogTableVisiblea = true;
    },
    //核算
    AccounTing() {
      this.dialogTableVisibleBa = true;
    },
    // 筛选
    onsubmit() {
      this.getData(0);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.incolumn_countr {
  margin-left: 15px;
  height: 50px;
  width: 97%;
  background-color: white;
  padding-top: 10px;
}
.from_tab {
  margin-top: 250px;
  width: 98%;
  margin-left: 15px;
}
.Zt {
  margin-top: 40px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.Zt_a {
  margin-top: 20px;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
}
.Ben_JingBan {
  margin-top: -10px;
  height: 200px;
  width: 13%;
  background-color: white;
  float: left;
  margin-left: 15px;

}
.from_tabs {
  margin-top: -10px;
  float: left;
  width: 85%;
}
.block {
  margin-top: -10px;
  margin-left: 20px;
  cursor: pointer;
}
.herd_bud {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: rgb(14, 18, 240);
}
.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
}
.From_List_bt {
  font-size: $font-size-medium-x;
  font-weight: bold;
}

.demo-form-inline {
  margin-top: 10px;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}
.from_btn {
  margin-top: 20px;
  text-align: center;
}
.bottom_slate {
  height: 40px;
  margin-top: 10px;
  text-align: center;
}
</style>